<template>
  <div class="fillcontain">
    <!-- <search></search> -->
    <div class="contain">
      <search-item
        @showDialog="showAddFundDialog"
        @searchList="orderadminlist"
      ></search-item>
      <div class="table_container">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          highlight-current-row
          header-cell-class-name="table-header-class"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span
                >{{
                  scope.$index +
                  (paginations.pageIndex - 1) * paginations.pageSize +
                  1
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            property="clientphone"
            label="用户电话"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="username"
            label="分享者昵称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="userphone"
            label="分享者电话"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="name"
            label="产品名称"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="price"
            label="订单价格"
            width="180"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column property="permission" label="注册地址" align="center">
          </el-table-column> -->
          <el-table-column property="mileage" label="公路数" align="center">
          </el-table-column>

          <el-table-column property="status" label="订单状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">取消订单</span>
              <span v-if="scope.row.status == 1">等待看车</span>
              <span v-if="scope.row.status == 2">已经看完</span>
              <span v-if="scope.row.status == 3">订单完成</span>
              <span v-if="scope.row.status == 4">已分配业务员</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="280">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.status == 1"
                @click="showAddFundDialog(scope.row)"
              >
                安排业务员
              </el-button>
              <!-- <el-button size="mini" @click="handleDel(scope.row)"> 删除 </el-button>
              <el-button size="mini" @click="handleView(scope.row)"> 查看 </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                v-if="paginations.total > 0"
                :page-sizes="paginations.pageSizes"
                :page-size="paginations.pageSize"
                :layout="paginations.layout"
                :total="paginations.total"
                :current-page="paginations.pageIndex"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <addFundDialog
      v-if="addFundDialog.show"
      :isShow="addFundDialog.show"
      :dialogRow="addFundDialog.dialogRow"
      @getFundList="orderadminlist"
      @closeDialog="hideAddFundDialog"
    ></addFundDialog>
  </div>
</template>

<script>
import { orderadminlist } from "@/api/order";
import SearchItem from "./components/searchItem";
import Search from "./components/Search.vue";
import AddFundDialog from "./components/addFundDialog";
export default {
  components: {
    Search,
    SearchItem,
    AddFundDialog,
  },
  data() {
    return {
      tableData: [],
      addFundDialog: {
        show: false,
        dialogRow: {},
      },
      loading: true,
      //需要给分页组件传的信息
      paginations: {
        total: 0, // 总数
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
    };
  },
  created() {},
  mounted() {
    this.orderadminlist();
  },
  methods: {
    hideAddFundDialog() {
      this.addFundDialog.show = false;
    },
    showAddFundDialog(val) {
      this.$store.commit("SET_DIALOG_TITLE", "add");
      this.addFundDialog.dialogRow = {
        orderid: val.id,
        productid: val.productid,
      };
      this.addFundDialog.show = true;
    },
    orderadminlist(data) {
      let para;
      if (data) {
        para = {
          opcode: "Int16Array",
          pagesize: this.paginations.pageSize,
          page: this.paginations.pageIndex,
          ...data,
        };
      } else {
        para = {
          opcode: "111",
          pagesize: this.paginations.pageSize,
          page: this.paginations.pageIndex,
        };
      }

      orderadminlist(para).then((res) => {
        this.loading = false;
        this.paginations.total = res.data.pagetotal;
        this.tableData = res.data.data;
      });
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.orderadminlist();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.orderadminlist();
    },
  },
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;
}
.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
.pagination {
  padding: 10px 20px;
  text-align: right;
}
</style>
